import { Card } from "antd";
import { useState, useRef, useEffect } from "react";
import style from "./chat.module.scss";
import { click } from "@testing-library/user-event/dist/click";
import { Button, Divider, Flex, Radio, Input, message } from "antd";
import { v4 as uuidv4 } from "uuid";

let Chat = () => {
  let [chatList, setchatList] = useState([
    {
      name: "小浩",
      id: 1,
      text: "在吗",
    },
    {
      name: "小然",
      id: 2,
      text: "不在啊啊啊啊啊啊啊",
    },
    {
      name: "小浩",
      id: 3,
      text: "在吗",
    },
    {
      name: "小然",
      id: 4,
      text: "都告诉你啦不在",
    },
  ]);
  let clickChat = () => {
    console.log(1111111111);
  };

  let renderleftChatList = () => {
    return (
      <>
        {chatList.map((Item) => {
          if (Item.name === "小浩") {
            return (
              <div
                onClick={clickChat}
                className={style.chatItemLeft}
                key={Item.id /* Assuming Item has an 'id' field */}
              >
                <div className={style.photo}></div>
                <div className={style.textLeft}>{Item.text}</div>
              </div>
            );
          } else {
            return (
              <div
                className={style.chatItemRight}
                key={Item.id /* Assuming Item has an 'id' field */}
              >
                <div className={style.textRight}>{Item.text}</div>
                <div className={style.photo}></div>
              </div>
            );
          }
        })}
      </>
    );
  };
  let renderRightChatList = () => {
    return (
      <>
        {chatList.map((Item) => {
          if (Item.name === "小然") {
            return (
              <div
                className={style.chatItemLeft}
                key={Item.id /* Assuming Item has an 'id' field */}
              >
                <div className={style.photo}></div>

                <div className={style.textLeft}>{Item.text}</div>
              </div>
            );
          } else {
            return (
              <div
                className={style.chatItemRight}
                key={Item.id /* Assuming Item has an 'id' field */}
              >
                <div className={style.textRight}>{Item.text}</div>
                <div className={style.photo}></div>
              </div>
            );
          }
        })}
      </>
    );
  };

  let sendMessage = (e) => {
    if (e === 1) {
      if (!InputValue1) {
        message.warning({
          content: "打一个字吧",
        });
        return;
      }
      console.log(InputValue1);
      if (InputValue1 == "在吗") {
        console.log(InputValue1);

        message.warning({
          content: "别当舔狗可以不？",
        });
      }
      setchatList((pre) => [
        ...pre,
        { name: "小浩", text: InputValue1, id: uuidv4() },
      ]);
      setInputValue1("");
    } else {
      if (!InputValue2) {
        message.warning({
          content: "打一个字吧",
        });
        return;
      }
      setchatList((pre) => [
        ...pre,
        { name: "小然", text: InputValue2, id: uuidv4() },
      ]);
      setInputValue2("");
    }
  };

  let [InputValue1, setInputValue1] = useState("");
  let [InputValue2, setInputValue2] = useState("");

  let ref1 = useRef(null);
  let ref2 = useRef(null);

  let scrollToBottom1 = () => {
    if (ref1.current) {
      ref1.current.scrollTop =
        ref1.current.scrollHeight - ref1.current.clientHeight;
      console.log(ref1.current.scrollTop);
    }
  };
  let scrollToBottom2 = () => {
    if (ref2.current) {
      ref2.current.scrollTop =
        ref2.current.scrollHeight - ref2.current.clientHeight;
      console.log(ref2.current.scrollTop);
    }
  };
  useEffect(() => {
    scrollToBottom1();
    scrollToBottom2();
  }, [chatList]);

  return (
    <>
      <div className={style.root}>
        <Card
          title="小浩"
          bordered={false}
          style={{
            width: 500,
          }}
        >
          <div ref={ref1} className={style.chatListContainer}>
            {renderRightChatList()}
          </div>

          <div className={style.inputDiv}>
            <Input
              value={InputValue1}
              className={style.mr20}
              defaultValue="26888888"
              onChange={(e) => setInputValue1(e.target.value)}
            />
            <Button type="primary" onClick={() => sendMessage(1)}>
              发送
            </Button>
          </div>
        </Card>

        <Card
          title="小然"
          bordered={false}
          style={{
            width: 500,
          }}
        >
          <div ref={ref2} className={style.chatListContainer}>
            {renderleftChatList()}
          </div>
          <div className={style.inputDiv}>
            <Input
              value={InputValue2}
              className={style.mr20}
              defaultValue="26888888"
              onChange={(e) => setInputValue2(e.target.value)}
            />
            <Button type="primary" onClick={() => sendMessage(2)}>
              发送
            </Button>
          </div>
        </Card>
      </div>
    </>
  );
};

export { Chat };
